<template>
	<div :id="prop.domId" style="width: 100%; height: 100%"></div>
</template>

<script lang="ts" setup>
import { nextTick } from 'vue'
import * as echarts from 'echarts'
const prop = defineProps({
	domId: String,
	data: Array
})

type EChartsOption = echarts.EChartsOption
const color = ['#73C0DE', '#5470C6', '#EE6666', '#FBCD5A', '#91CC75']

nextTick(() => {
	var chartDom = document.getElementById(prop.domId as never)!
	var myChart = echarts.init(chartDom)
	var option: EChartsOption

	option = {
		xAxis: {
			type: 'category',
			data: prop.data?.map((item: any) => item.name)
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				label: {
					show: true,
					formatter: '{@score}人'
				},
				labelLayout:{
					dy:-5
				},
				data: prop.data?.map((item: any, i: any) => {
					return {
						value: item.value,
						itemStyle: {
							color: color[i]
						}
					}
				}),
				type: 'bar'
			}
		]
	}

	option && myChart.setOption(option)
})
</script>

<style></style>
